<template>
    <div id="singleBlog">
        <h1>{{blog.title}}</h1>
        <article>{{blog.content}}</article>
        <p>作者:{{blog.author}}</p>
        <p>分类:</p>
        <ul>
            <li v-for="category in blog.categories">{{category}}</li>
        </ul>
        <button @click="deleteSingleBlog()" class="delete">删除</button>
        <router-link :to="'/editBlog/'+id" class="edit">编辑</router-link>
    </div>
</template>
<script>
export default {
    name:'single-blog',
    data(){
        return{
            // 接收传过来的Id
            id:this.$route.params.id,
            blog:{}
        }
    },
    created(){
        // 请求数据并把点击传过来的id带入
        this.$axios.get('https://wd4254457889oggbip.wilddogio.com/posts/'+this.id+'.json')
        .then(res =>{
            this.blog = res.data
        })
    },
    methods:{
        deleteSingleBlog(){
            this.$axios.delete('https://wd4254457889oggbip.wilddogio.com/posts/'+this.id+'.json')
            .then(res =>{
                this.$router.push({path:'/'})
            })
        }
    }
}
</script>
<style scoped>
#singleBlog{
    overflow: hidden;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
    background-color: #eee;
    border: 1px dotted #aaa;
}
a{
    text-decoration: none;
}
.delete{
    float: right;
    border: none;
    background-color: transparent;
    color: red;
    font-size: 14px;
}
.edit{
    float: right;
    font-size: 14px;
    color: #FFA200;
    border-right: 1px solid #E0E0E0;
    padding-right: 5px;
}
.edit:hover{
    color: #CC8100;
}
</style>


